<template>
  <div class="property-panel">
    <div class="panel-header">
      <h3>属性面板</h3>
    </div>
    
    <div class="panel-content" v-if="selectedComponent">
      <!-- 基础属性 -->
      <div class="property-group">
        <div class="group-title">基础属性</div>
        <div class="property-item">
          <label>组件名称</label>
          <el-input 
            v-model="componentProps.name" 
            size="small"
            @input="updateProperty('name', $event)"
          />
        </div>
        <div class="property-item">
          <label>组件ID</label>
          <el-input 
            v-model="componentProps.id" 
            size="small"
            disabled
          />
        </div>
      </div>

      <!-- 位置属性 -->
      <div class="property-group">
        <div class="group-title">位置属性</div>
        <div class="property-row">
          <div class="property-item half">
            <label>X坐标</label>
            <el-input-number 
              v-model="componentProps.position.x" 
              size="small"
              :min="0"
              @change="updateProperty('position.x', $event)"
            />
          </div>
          <div class="property-item half">
            <label>Y坐标</label>
            <el-input-number 
              v-model="componentProps.position.y" 
              size="small"
              :min="0"
              @change="updateProperty('position.y', $event)"
            />
          </div>
        </div>
        <div class="property-row">
          <div class="property-item half">
            <label>宽度</label>
            <el-input-number 
              v-model="componentProps.position.width" 
              size="small"
              :min="20"
              @change="updateProperty('position.width', $event)"
            />
          </div>
          <div class="property-item half">
            <label>高度</label>
            <el-input-number 
              v-model="componentProps.position.height" 
              size="small"
              :min="20"
              @change="updateProperty('position.height', $event)"
            />
          </div>
        </div>
      </div>

      <!-- 样式属性 -->
      <div class="property-group">
        <div class="group-title">样式属性</div>
        <div class="property-item">
          <label>背景颜色</label>
          <el-color-picker 
            v-model="componentProps.style.backgroundColor" 
            size="small"
            @change="updateProperty('style.backgroundColor', $event)"
          />
        </div>
        <div class="property-item">
          <label>边框颜色</label>
          <el-color-picker 
            v-model="componentProps.style.borderColor" 
            size="small"
            @change="updateProperty('style.borderColor', $event)"
          />
        </div>
        <div class="property-item">
          <label>边框宽度</label>
          <el-input-number 
            v-model="componentProps.style.borderWidth" 
            size="small"
            :min="0"
            @change="updateProperty('style.borderWidth', $event + 'px')"
          />
        </div>
        <div class="property-item">
          <label>圆角</label>
          <el-input-number 
            v-model="componentProps.style.borderRadius" 
            size="small"
            :min="0"
            @change="updateProperty('style.borderRadius', $event + 'px')"
          />
        </div>
        <div class="property-item">
          <label>透明度</label>
          <el-slider 
            v-model="componentProps.style.opacity" 
            :min="0"
            :max="1"
            :step="0.1"
            @change="updateProperty('style.opacity', $event)"
          />
        </div>
      </div>

             <!-- 文本属性 (仅文本组件显示) -->
       <div class="property-group" v-if="selectedComponent.type === 'text'">
         <div class="group-title">文本属性</div>
         <div class="property-item">
           <label>文本内容</label>
           <el-input 
             v-model="componentProps.props.content" 
             type="textarea"
             :rows="3"
             size="small"
             @input="updateProperty('props.content', $event)"
           />
         </div>
         <div class="property-item">
           <label>字体大小</label>
           <el-input-number 
             v-model="componentProps.style.fontSize" 
             size="small"
             :min="12"
             @change="updateProperty('style.fontSize', $event + 'px')"
           />
         </div>
         <div class="property-item">
           <label>字体颜色</label>
           <el-color-picker 
             v-model="componentProps.style.color" 
             size="small"
             @change="updateProperty('style.color', $event)"
           />
         </div>
         <div class="property-item">
           <label>字体粗细</label>
           <el-select 
             v-model="componentProps.style.fontWeight" 
             size="small"
             @change="updateProperty('style.fontWeight', $event)"
           >
             <el-option label="正常" value="normal" />
             <el-option label="粗体" value="bold" />
             <el-option label="100" value="100" />
             <el-option label="200" value="200" />
             <el-option label="300" value="300" />
             <el-option label="400" value="400" />
             <el-option label="500" value="500" />
             <el-option label="600" value="600" />
             <el-option label="700" value="700" />
             <el-option label="800" value="800" />
             <el-option label="900" value="900" />
           </el-select>
         </div>
         <div class="property-item">
           <label>文本对齐</label>
           <el-select 
             v-model="componentProps.style.textAlign" 
             size="small"
             @change="updateProperty('style.textAlign', $event)"
           >
             <el-option label="左对齐" value="left" />
             <el-option label="居中" value="center" />
             <el-option label="右对齐" value="right" />
             <el-option label="两端对齐" value="justify" />
           </el-select>
         </div>
       </div>

               <!-- 正方形文字组件属性 (仅正方形组件显示) -->
        <div class="property-group" v-if="selectedComponent.type === 'button'">
          <div class="group-title">长方形文字组件属性</div>
          <div class="property-item">
            <label>显示文字</label>
            <el-input 
              v-model="componentProps.props.text" 
              size="small"
              @input="updateProperty('props.text', $event)"
            />
          </div>
        </div>

               <!-- 圆形文字组件属性 (仅圆形组件显示) -->
        <div class="property-group" v-if="selectedComponent.type === 'input'">
          <div class="group-title">圆形文字组件属性</div>
          <div class="property-item">
            <label>显示文字</label>
            <el-input 
              v-model="componentProps.props.text" 
              size="small"
              @input="updateProperty('props.text', $event)"
            />
          </div>
        </div>

       <!-- 容器属性 (仅容器组件显示) -->
       <div class="property-group" v-if="selectedComponent.type === 'container'">
         <div class="group-title">容器属性</div>
         <div class="property-item">
           <label>容器标题</label>
           <el-input 
             v-model="componentProps.props.title" 
             size="small"
             @input="updateProperty('props.title', $event)"
           />
         </div>
         <div class="property-item">
           <label>显示边框</label>
           <el-switch 
             v-model="componentProps.props.showBorder" 
             @change="updateProperty('props.showBorder', $event)"
           />
         </div>
         <div class="property-item">
           <label>显示标题栏</label>
           <el-switch 
             v-model="componentProps.props.showTitleBar" 
             @change="updateProperty('props.showTitleBar', $event)"
           />
         </div>
         <div class="property-item">
           <label>可折叠</label>
           <el-switch 
             v-model="componentProps.props.collapsible" 
             @change="updateProperty('props.collapsible', $event)"
           />
         </div>
       </div>

       <!-- 基础地图属性 -->
       <div class="property-group" v-if="selectedComponent.type === 'base-map'">
         <div class="group-title">地图配置</div>
         <div class="property-item">
           <label>底图服务</label>
           <!-- <el-select 
             v-model="componentProps.props.baseMapService" 
             size="small"
             @change="updateProperty('props.baseMapService', $event)"
           >
             <el-option label="天地图" value="tianditu" />
             <el-option label="高德地图" value="amap" />
             <el-option label="百度地图" value="baidu" />
             <el-option label="OpenStreetMap" value="osm" />
             <el-option label="自定义" value="custom" />
           </el-select> -->
           <el-input 
             v-model="componentProps.props.baseMapService" 
             size="small"
             placeholder="请输入图层服务地址"
             @input="updateProperty('props.baseMapService', $event)"
           />
         </div>
         <div class="property-item" v-if="componentProps.props.baseMapService === 'custom'">
           <label>自定义服务地址</label>
           <el-input 
             v-model="componentProps.props.customBaseMapUrl" 
             size="small"
             placeholder="请输入WMS/WMTS服务地址"
             @input="updateProperty('props.customBaseMapUrl', $event)"
           />
         </div>
         <div class="property-item">
           <label>图层服务</label>
           <el-input 
             v-model="componentProps.props.layerServiceUrl" 
             size="small"
             placeholder="请输入图层服务地址"
             @input="updateProperty('props.layerServiceUrl', $event)"
           />
         </div>
         <!-- <div class="property-item">
           <label>初始缩放级别</label>
           <el-input-number 
             v-model="componentProps.props.initialZoom" 
             size="small"
             :min="1"
             :max="20"
             @change="updateProperty('props.initialZoom', $event)"
           />
         </div>
         <div class="property-item">
           <label>初始中心点经度</label>
           <el-input-number 
             v-model="componentProps.props.initialLng" 
             size="small"
             :precision="6"
             @change="updateProperty('props.initialLng', $event)"
           />
         </div>
         <div class="property-item">
           <label>初始中心点纬度</label>
           <el-input-number 
             v-model="componentProps.props.initialLat" 
             size="small"
             :precision="6"
             @change="updateProperty('props.initialLat', $event)"
           />
         </div> -->
       </div>

       <!-- 指北针属性 -->
       <div class="property-group" v-if="selectedComponent.type === 'map-compass'">
         <div class="group-title">指北针配置</div>
         <div class="property-item">
           <label>指北针样式</label>
           <el-select 
             v-model="componentProps.props.compassStyle" 
             size="small"
             @change="updateProperty('props.compassStyle', $event)"
           >
             <el-option label="经典" value="classic" />
             <el-option label="现代" value="modern" />
             <el-option label="简约" value="minimal" />
           </el-select>
         </div>
         <div class="property-item">
           <label>指北针大小</label>
           <el-input-number 
             v-model="componentProps.props.compassSize" 
             size="small"
             :min="20"
             :max="100"
             @change="updateProperty('props.compassSize', $event)"
           />
         </div>
         <div class="property-item">
           <label>显示标签</label>
           <el-switch 
             v-model="componentProps.props.showLabels" 
             @change="updateProperty('props.showLabels', $event)"
           />
         </div>
         <div class="property-item">
           <label>自动旋转</label>
           <el-switch 
             v-model="componentProps.props.autoRotate" 
             @change="updateProperty('props.autoRotate', $event)"
           />
         </div>
       </div>

       <!-- 比例尺属性 -->
       <div class="property-group" v-if="selectedComponent.type === 'map-scale'">
         <div class="group-title">比例尺配置</div>
         <div class="property-item">
           <label>比例尺样式</label>
           <el-select 
             v-model="componentProps.props.scaleStyle" 
             size="small"
             @change="updateProperty('props.scaleStyle', $event)"
           >
             <el-option label="线条" value="line" />
             <el-option label="条形" value="bar" />
             <el-option label="圆形" value="circle" />
           </el-select>
         </div>
         <div class="property-item">
           <label>比例尺单位</label>
           <el-select 
             v-model="componentProps.props.scaleUnit" 
             size="small"
             @change="updateProperty('props.scaleUnit', $event)"
           >
             <el-option label="米" value="m" />
             <el-option label="千米" value="km" />
             <el-option label="英里" value="mi" />
             <el-option label="海里" value="nmi" />
           </el-select>
         </div>
         <div class="property-item">
           <label>显示数值</label>
           <el-switch 
             v-model="componentProps.props.showValues" 
             @change="updateProperty('props.showValues', $event)"
           />
         </div>
         <div class="property-item">
           <label>比例尺长度</label>
           <el-input-number 
             v-model="componentProps.props.scaleLength" 
             size="small"
             :min="50"
             :max="300"
             @change="updateProperty('props.scaleLength', $event)"
           />
         </div>
       </div>

       <!-- 图片属性 -->
       <div class="property-group" v-if="selectedComponent.type === 'image'">
         <div class="group-title">图片配置</div>
         <div class="property-item">
           <label>上传图片</label>
           <el-upload
             class="image-uploader"
             action="#"
             :show-file-list="false"
             :before-upload="handleImageUpload"
             accept="image/*"
           >
             <img v-if="componentProps.props.src" :src="componentProps.props.src" class="uploaded-image" />
             <i v-else class="el-icon-plus image-uploader-icon"></i>
           </el-upload>
         </div>
         <div class="property-item">
           <label>图片地址</label>
           <el-input 
             v-model="componentProps.props.src" 
             size="small"
             placeholder="请输入图片URL或上传图片"
             @input="updateProperty('props.src', $event)"
           />
         </div>
         <div class="property-item">
           <label>替代文本</label>
           <el-input 
             v-model="componentProps.props.alt" 
             size="small"
             @input="updateProperty('props.alt', $event)"
           />
         </div>
         <div class="property-item">
           <label>填充方式</label>
           <el-select 
             v-model="componentProps.style.objectFit" 
             size="small"
             @change="updateProperty('style.objectFit', $event)"
           >
             <el-option label="填充" value="fill" />
             <el-option label="包含" value="contain" />
             <el-option label="覆盖" value="cover" />
             <el-option label="缩小" value="scale-down" />
             <el-option label="无" value="none" />
           </el-select>
         </div>
       </div>

       <!-- 视频属性 -->
       <div class="property-group" v-if="selectedComponent.type === 'video'">
         <div class="group-title">视频配置</div>
         <div class="property-item">
           <label>上传视频</label>
           <el-upload
             class="video-uploader"
             action="#"
             :show-file-list="false"
             :before-upload="handleVideoUpload"
             accept="video/*"
           >
             <div v-if="componentProps.props.src" class="uploaded-video">
               <video :src="componentProps.props.src" controls class="video-preview"></video>
             </div>
             <i v-else class="el-icon-plus video-uploader-icon"></i>
           </el-upload>
         </div>
         <div class="property-item">
           <label>视频地址</label>
           <el-input 
             v-model="componentProps.props.src" 
             size="small"
             placeholder="请输入视频URL或上传视频"
             @input="updateProperty('props.src', $event)"
           />
         </div>
         <div class="property-item">
           <label>自动播放</label>
           <el-switch 
             v-model="componentProps.props.autoplay" 
             @change="updateProperty('props.autoplay', $event)"
           />
         </div>
         <div class="property-item">
           <label>循环播放</label>
           <el-switch 
             v-model="componentProps.props.loop" 
             @change="updateProperty('props.loop', $event)"
           />
         </div>
         <div class="property-item">
           <label>静音</label>
           <el-switch 
             v-model="componentProps.props.muted" 
             @change="updateProperty('props.muted', $event)"
           />
         </div>
         <div class="property-item">
           <label>显示控制条</label>
           <el-switch 
             v-model="componentProps.props.controls" 
             @change="updateProperty('props.controls', $event)"
           />
         </div>
       </div>

       <!-- 图表属性 (仅图表组件显示) -->
       <div class="property-group" v-if="isChartComponent">
         <div class="group-title">图表属性</div>
         <div class="property-item">
           <label>图表标题</label>
           <el-input 
             v-model="componentProps.props.title" 
             size="small"
             @input="updateProperty('props.title', $event)"
           />
         </div>
         <div class="property-item">
           <label>数据源</label>
           <el-input 
             v-model="componentProps.props.dataSource" 
             type="textarea"
             :rows="4"
             size="small"
             placeholder="请输入JSON格式的数据"
             @input="updateProperty('props.dataSource', $event)"
           />
         </div>
       </div>

      <!-- 动画属性 -->
      <!-- <div class="property-group">
        <div class="group-title">动画属性</div>
        <div class="property-item">
          <label>动画类型</label>
          <el-select 
            v-model="componentProps.props.animation" 
            size="small"
            @change="updateProperty('props.animation', $event)"
          >
            <el-option label="无" value="none" />
            <el-option label="淡入" value="fadeIn" />
            <el-option label="滑入" value="slideIn" />
            <el-option label="缩放" value="zoomIn" />
            <el-option label="旋转" value="rotateIn" />
          </el-select>
        </div>
        <div class="property-item">
          <label>动画延迟(ms)</label>
          <el-input-number 
            v-model="componentProps.props.animationDelay" 
            size="small"
            :min="0"
            @change="updateProperty('props.animationDelay', $event)"
          />
        </div>
      </div> -->
    </div>

    <div class="no-selection" v-else>
      <el-empty description="请选择一个组件" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { ComponentConfig } from '../interface'

// Props
interface Props {
  selectedComponent: ComponentConfig | null
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  'property-change': [property: string, value: any]
}>()

// 响应式数据
const componentProps = ref<ComponentConfig>({
  id: '',
  type: '',
  name: '',
  props: {},
  style: {
    backgroundColor: '#ffffff',
    borderColor: '#dcdfe6',
    borderWidth: 0,
    borderRadius: 0,
    opacity: 1,
    fontSize: 14,
    color: '#303133',
    fontWeight: 'normal',
    textAlign: 'left'
  },
  position: { x: 0, y: 0, width: 0, height: 0 }
})

// 计算属性
const isChartComponent = computed(() => {
  return props.selectedComponent?.type?.includes('chart') || false
})

// 判断是否为地图组件
const isMapComponent = computed(() => {
  return ['base-map', 'map-compass', 'map-scale'].includes(props.selectedComponent?.type || '')
})

// 判断是否为媒体组件
const isMediaComponent = computed(() => {
  return ['image', 'video'].includes(props.selectedComponent?.type || '')
})

// 更新属性
const updateProperty = (property: string, value: any) => {
  console.log('PropertyPanel: updateProperty called')
  console.log('Property:', property)
  console.log('Value:', value)
  
  // 更新本地 componentProps，确保界面实时更新
  const path = property.split('.')
  let target: any = componentProps.value
  
  for (let i = 0; i < path.length - 1; i++) {
    if (!target[path[i]]) {
      target[path[i]] = {}
    }
    target = target[path[i]]
  }
  
  target[path[path.length - 1]] = value
  
  // 发出事件通知父组件
  emit('property-change', property, value)
}

// 处理图片上传
const handleImageUpload = (file: File) => {
  console.log('Image upload:', file)
  // 这里可以调用实际的图片上传API
  // 暂时使用本地URL作为示例
  const reader = new FileReader()
  reader.onload = (e) => {
    const result = e.target?.result as string
    updateProperty('props.src', result)
  }
  reader.readAsDataURL(file)
  return false // 阻止默认上传行为
}

// 处理视频上传
const handleVideoUpload = (file: File) => {
  console.log('Video upload:', file)
  // 这里可以调用实际的视频上传API
  // 暂时使用本地URL作为示例
  const reader = new FileReader()
  reader.onload = (e) => {
    const result = e.target?.result as string
    updateProperty('props.src', result)
  }
  reader.readAsDataURL(file)
  return false // 阻止默认上传行为
}

// 监听选中组件变化
watch(() => props.selectedComponent, (newComponent) => {
  console.log('PropertyPanel: selectedComponent changed:', newComponent)
  console.log('PropertyPanel: props.selectedComponent:', props.selectedComponent)
  console.log('PropertyPanel: componentProps.value before update:', componentProps.value)
  
  if (newComponent) {
    console.log('PropertyPanel: updating componentProps with:', newComponent)
    // 深度复制组件数据，确保所有属性都被正确复制
    componentProps.value = JSON.parse(JSON.stringify(newComponent))
    console.log('PropertyPanel: componentProps updated to:', componentProps.value)
  } else {
    console.log('PropertyPanel: no component selected, clearing componentProps')
    componentProps.value = {
      id: '',
      type: '',
      name: '',
      props: {},
      style: {
        backgroundColor: '#ffffff',
        borderColor: '#dcdfe6',
        borderWidth: 0,
        borderRadius: 0,
        opacity: 1,
        fontSize: 14,
        color: '#303133',
        fontWeight: 'normal',
        textAlign: 'left'
      },
      position: { x: 0, y: 0, width: 0, height: 0 }
    }
  }
}, { immediate: true, deep: true })

// 添加一个额外的 watch 来监听 props 变化
watch(() => props, (newProps) => {
  console.log('PropertyPanel: props changed:', newProps)
  console.log('PropertyPanel: newProps.selectedComponent:', newProps.selectedComponent)
}, { deep: true })
</script>

<style lang="scss" scoped>
.property-panel {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;

  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }
}

.panel-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.property-group {
  margin-bottom: 24px;

  .group-title {
    font-size: 14px;
    font-weight: 500;
    color: #606266;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
  }

  .property-item {
    margin-bottom: 12px;

    label {
      display: block;
      font-size: 12px;
      color: #606266;
      margin-bottom: 4px;
    }

    &.half {
      width: calc(50% - 6px);
      display: inline-block;
      margin-right: 12px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .property-row {
    display: flex;
    gap: 12px;
  }
}

.no-selection {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-color-picker) {
  width: 100%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-slider) {
  padding: 0 12px;
}

// 图片上传样式
.image-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &:hover {
    border-color: #409eff;
  }
  
  .image-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  
  .uploaded-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

// 视频上传样式
.video-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &:hover {
    border-color: #409eff;
  }
  
  .video-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  
  .uploaded-video {
    width: 100%;
    height: 100%;
    
    .video-preview {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
